<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式 H5 页面示例</title>
<!--    <style>-->
<!--        /* 基础样式 */-->
<!--        body {-->
<!--            font-family: "Arial", sans-serif;-->
<!--            margin: 0;-->
<!--            padding: 0;-->
<!--            background-color: #f4f4f4;-->
<!--        }-->

<!--        /* 导航栏样式 */-->
<!--        .navbar {-->
<!--            background-color: #333;-->
<!--            padding: 15px 0;-->
<!--            text-align: center;-->
<!--        }-->

<!--        .navbar a {-->
<!--            color: white;-->
<!--            text-decoration: none;-->
<!--            padding: 12px 24px;-->
<!--            display: inline-block;-->
<!--        }-->

<!--        .navbar a:hover {-->
<!--            background-color: #555;-->
<!--        }-->

<!--        /* 卡片容器 */-->
<!--        .container {-->
<!--            padding: 20px;-->
<!--            display: flex;-->
<!--            flex-wrap: wrap;-->
<!--            justify-content: center;-->
<!--        }-->

<!--        .card {-->
<!--            background-color: white;-->
<!--            margin: 15px;-->
<!--            padding: 20px;-->
<!--            border-radius: 8px;-->
<!--            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);-->
<!--            width: calc(33% - 30px); /* 响应式布局 */-->
<!--            min-width: 300px;-->
<!--        }-->

<!--        /* 表单样式 */-->
<!--        .form-container {-->
<!--            background-color: white;-->
<!--            padding: 20px;-->
<!--            margin: 20px;-->
<!--            border-radius: 8px;-->
<!--            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);-->
<!--        }-->

<!--        .form-group {-->
<!--            margin-bottom: 15px;-->
<!--        }-->

<!--        .form-group label {-->
<!--            display: block;-->
<!--            margin-bottom: 5px;-->
<!--        }-->

<!--        .form-group input,-->
<!--        .form-group textarea {-->
<!--            width: 100%;-->
<!--            padding: 8px;-->
<!--            border: 1px solid #ddd;-->
<!--            border-radius: 4px;-->
<!--        }-->

<!--        /* 响应式媒体查询 */-->
<!--        @media (max-width: 768px) {-->
<!--            .card {-->
<!--                width: 100%;-->
<!--                min-width: auto;-->
<!--            }-->
<!--        }-->
<!--    </style>-->
</head>
<body>
<!-- 导航栏 -->
<!--<div class="navbar">-->
<!--    <a href="#home">首页</a>-->
<!--    <a href="#about">关于</a>-->
<!--    <a href="#contact">联系我们</a>-->
<!--</div>-->

<!-- 主要内容 -->
<!--<div class="container">-->
    <!-- 卡片示例 -->
<!--<div style="height: 100%;">-->
<!--   <iframe id ="myIframe" src="https://h.7dingdong.com/#/?store_id=9759240"-->

<!--           style="width: 100%; border: none;"-->


<!--   ></iframe>-->
<iframe

        src="https://h.7dingdong.com/#/?store_id=9759240"

        allowfullscreen

        style="width: 100%; height: 900px; "
></iframe>
<!--</div>-->
<!--</div>-->

<script>
    function resizeIframe() {
        const iframe = document.getElementById("myIframe");
        // 获取子页面的 document.body.scrollHeight（需确保内容加载完成）
        iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
    }

    // 监听 iframe 加载完成事件
    window.addEventListener("load", () => {
        const iframe = document.getElementById("myIframe");
        iframe.onload = () => {
            resizeIframe();
            // 可选：监听子页面内容变化（如动态加载内容）
            iframe.contentWindow.addEventListener("resize", resizeIframe);
        };
    });
</script>
</body>
</html>